<template>
 <el-dialog  title="新建圈子" :visible="showDialog" :before-close="handleClose" width="30%">
    <el-form  :model="circleForm" label-width="80px">
         <el-form-item label="圈子名称">
            <el-input v-model="circleForm.name"></el-input>
         </el-form-item>
         <el-form-item label="圈子头像">
            <el-upload action ="" :auto-upload = "false" :before-upload="handleBeforeUpload">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
         </el-form-item>
          <el-form-item label="圈子简介">
            <el-input  type="textarea" v-model="circleForm.introduce" :rows="5" placeholder="请输入内容"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
         </el-form-item>
    </el-form>
 </el-dialog> 
</template>
<script>
export default {
   data() {
       return {
            circleForm: {
                id:'',
                name:'',
                introduce:''
            },
            file:''
       }
   },
   computed:{
       showDialog(){
           return  this.$store.state.circleStore.showCircleAddDialog;
       }
    //    name:function(){
    //        return this.$store.state.circleStore.circleEditData.name;
    //    },
    //    introduce:function(){
    //        return this.$store.state.circleStore.circleEditData.introduce;
    //    }
   },
   methods:{
      handleClose(done){
         this.$confirm('确认关闭？')
          .then(_ => {
            this.$store.state.circleStore.showCircleAddDialog = false;
            done();
          })
          .catch(_ => {});
      },
      onSubmit(){
          //获取编辑属性放入data中 TODO
           console.log(this.circleForm.name);
          console.log(this.circleForm.introduce);
          var data = new FormData();
          data.append("pic",this.file);
          data.append("name",this.circleForm.name);
          data.append("introduce",this.circleForm.introduce);
         
          this.$store.dispatch('createCircle',data);
      },
      handleBeforeUpload(file){
          this.file = file;
          return false;
      }
   }
}
</script>
<style scoped>




</style>


